<template>
    <TableSearch 
      :updateTableList="updateTableList" 
      :conditionList="conditionList"
      @search="handleSearch"
      @reset="handleReset"
    />
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from "vue";
  import TableSearch from '@/components/TableSearch/TableSearch.vue'
  
  const handleSearch = (params) => {
    console.log('搜索参数:', params);
    // 这里可以处理搜索逻辑
  };
  
  const handleReset = (params) => {
    console.log('重置参数:', params);
    // 这里可以处理重置逻辑
  };
  
  // 定义表格数据每项的类型
  type tableDataItem = {
    username: string;
    age: number;
    address: string;
    big: string;
    color: string;
    hobby: string;
    sex: string;
    school: string;
    grade: string;
  };
  // 表格加载loading
  const loading = ref(false);
  // 表格数据
  let tableData = ref<tableDataItem[]>([]);
  // 表格数据总条数
  const total = ref(0);
  // 查询条件配置项
  // type 是查询条件里面的组件类型 如input select等，可以自行添加需要的组件
  const conditionList = reactive([
    {
      id: 1,
      type: "input",
      label: "用户名称",
      prop: "username",
      placeholder: "请输入用户名称",
      span: 6,
    },
    {
      id: 2,
      type: "select",
      label: "个头大小",
      prop: "big",
      placeholder: "请选择个头大小",
      optionList: [
        {
          label: "大",
          value: 1,
        },
        {
          label: "小",
          value: 0,
        },
      ],
      span: 6,
    },
    {
      id: 3,
      type: "select",
      label: "性别",
      prop: "sex",
      placeholder: "请选择性别",
      optionList: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 0,
        },
      ],
      span: 6,
    },
    {
      id: 4,
      type: "input",
      label: "地址",
      prop: "address",
      placeholder: "请输入地址",
      span: 6,
    },
    {
      id: 5,
      type: "datetime",
      label: "档案时间",
      prop: "time",
      span: 6,
    },
  ]);
  const reqTableList = async (reqParams: any) => {
    // 模拟请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          code: 200,
          data: {
            list: [
              {
                username: "张三",
                age: 18,
                address: "北京市",
                big: 1,
                color: "red",
              }
            ]
          }
        })
      })
    })
  };
  // 请求数据代码仅供参考，这里放自己的业务逻辑
  const updateTableList = async (reqParams: any) => {
    loading.value = true;
    const { code, data }: any = await reqTableList(reqParams);
    if (code === 200) {
      tableData.value = data.list.map((item: tableDataItem) => ({
        ...item,
        bigLabel: item.big ? "大" : "小",
        sexLabel: item.sex ? "男" : "女",
      }));
      total.value = data.total;
      setTimeout(() => {
        loading.value = false;
      }, 1000);
    }
  };
  </script>